<style scoped>
  .vendorBill {
    margin-right:0.5vw;
    padding:0 15px;
    background-color:white;
    height:95vh;
    position:relative;
  }
  .top_msg {
    padding:1.5vh 0;
    border-bottom:2px solid #f4f4f4;
    white-space:nowrap;
  }
  .top_msg p {
    display:inline-block;
    text-align:right;
    line-height:30px;
    margin-right: 10px;
  }
  .vendorSales_c {
    display:flex;
    width:100%;
    height:82%;
  }
  .content1 {
    width: 30%;
    border-right:2px solid #f4f4f4;
    padding:2px 10px 0 0;
  }
  .content2 {
    width: 70%;
    padding-left:10px;
  }
  .footView span {
    float:left;
    margin-right:48px;
    line-height:6vh;
    font-size:14px;
  }
  .footView span i {
    margin-right:5px;
  }
  ._content {
    width:100%;
    margin:1.5vh 0;
  }
</style>

<style>
  .vendorBill .el-input__icon{
    line-height: 22px;
  }
  .vendorBill .c_b .el-button{
    padding: 0;
  }
  .vendorBill .top_msg .el-date-editor.el-input__inner{
    width: 370px;
    height: 30px;
  }
  .vendorBill .el-date-editor .el-range-separator {
    line-height: 22px;
    width: 10%;
  }

  .vendorBill .el-input__inner{
    height: 30px;
    width: 160px;
  }

  .vendorBill .el-pagination .el-select .el-input .el-input__inner , .vendorBill .el-pagination .el-select .el-input{
    width: 90px;
  }
  .vendorBill .el-pagination--small .el-pagination__editor.el-input .el-input__inner {
    width: 40px;
  }
  .vendorBill .el-pagination{
    float: right;
    margin-top: 5px;
  }
  .vendorBill .el-input--mini .el-input__inner{
    height: 23px;
  }
</style>


<template>
  <div class="vendorBill">
    
    <div class="top_msg">
      <p>厂商</p>
      <el-select clearable style="margin-right:10px" v-model="vendor" filterable placeholder="请选择">
        <el-option
          v-for="item in vendorList"
          :key="item.value"
          :label="item.value + ' ' + item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <p>日期</p>
      <el-date-picker
        clearable
        unlink-panels
        value-format="yyyy-MM-dd"
        v-model="dateList"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </div>

    <div class="_content">
      <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
      <el-button icon="el-icon-upload2" @click="outPutLeft()">导出左表</el-button>
      <el-button icon="el-icon-upload2" @click="outPutRight()">导出右表</el-button>
    </div>

    <div class="vendorSales_c">
      <div class="content1">
        <el-table
          :data="tableData1"
          style="width: 100%"
          height="75vh"
          highlight-current-row
          show-summary
          ref="table"
          :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
          :cell-style="{padding:0,height:'36px'}"
          @row-click="rowClick">
          <el-table-column
            type="index"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="sequence"
            label="单据序号"
            width="140">
          </el-table-column>
          <el-table-column
            prop="manufacturerNo"
            label="厂商">
          </el-table-column>
          <el-table-column
            prop="number"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="manufacturerPriceMoney"
            label="成本金额">
          </el-table-column>
          <el-table-column
            prop="money"
            label="售价金额">
          </el-table-column>
          <el-table-column
            prop="time"
            label="日期"
            width="120">
          </el-table-column>
        </el-table>
        <!-- <el-pagination small background 
          ref="paginationLeft" 
          layout="prev, pager, next, jumper, sizes" 
          :page-sizes="[20, 50, 100, 200]" 
          :page-size="limitLeft" 
          :page-count="pagesNumLeft" 
          :total="dataLenLeft" 
          @current-change="handleCurrentChangeLeft" 
          @size-change="handleSizeChangeLeft"></el-pagination> -->
      </div>

      <div class="content2">
        <el-table
          :data="tableData2"
          style="width: 100%"
          height="75vh"
          highlight-current-row
          :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
          :cell-style="{padding:0,height:'36px'}">
          <el-table-column
            prop="sequence"
            label="单据序号"
            width="140">
          </el-table-column>
          <el-table-column
            prop="manufacturerNo"
            label="厂商"
            width="80">
          </el-table-column>
          <el-table-column
            prop="kindsNumber"
            label="货号"
            width="140">
          </el-table-column>
          <el-table-column
            prop="colorNo"
            label="颜色编号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="colorName"
            label="颜色名称"
            width="80">
          </el-table-column>
          <el-table-column
            prop="size"
            label="尺码">
          </el-table-column>
          <el-table-column
            prop="number"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="manufacturerPrice"
            label="成本"
            width="80">
          </el-table-column>
          <el-table-column
            prop="manufacturerPriceMoney"
            label="成本金额">
          </el-table-column>
          <el-table-column
            prop="sellingPrice"
            label="售价">
          </el-table-column>
          <el-table-column
            prop="sellingPriceMoney"
            label="售价金额">
          </el-table-column>
          <el-table-column
            prop="time"
            label="日期"
            width="120">
          </el-table-column>
        </el-table>
      </div>

    </div>

    <foot-view class="footView">
      <div slot="text">
        <span>数据库：{{jxQuarter}}</span>
        <span>记录数：{{total}}</span>
      </div>
    </foot-view>

  </div>
</template>

<script>
import { getManufacturer, factoryBill } from '../../../network/manufacturer'

import footView from '../../../components/FootView'

import today from '../../../components/mixins/today'
import enterUp from '../../../components/mixins/enterUp'

import table2excel from 'js-table2excel'

export default {
  name: 'vendor_bill',
  mixins: [today,enterUp],
  created(){
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null

    this.inpList = this.getInput()

    getManufacturer({limit:99999}).then(res => {
      // console.log(res)
      if (res.data.code == 200) {
        res.data.data.forEach(e => {
          this.vendorList.push({value:e.no,label:e.name,contact:e.contact,phone:e.phone,address:e.address})
        })
      }
    })
  },
  data(){
    return{
      inpList: [],
      vendor: '',
      vendorList: [],
      // 默认选之前一周
      dateList: [this.searchDate(7),this.searchDate()],
      total: 0,
      tableData1: [],
      tableData2: [],
      infoList: [],
      jxQuarter: null,
      // jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],

      // 分页条数
      limitLeft: 20,
      // 总页码
      pagesNumLeft: 0,
      // 总数据条数
      dataLenLeft: 0,
      // 当前页码
      currentPageLeft: 1,
    }
  },
  watch: {
    dataLenLeft(a,b){
      this.pagesNumLeft = Math.ceil(this.dataLenLeft / this.limitLeft)
    },
    limitLeft(a,b){
      this.pagesNumLeft = Math.ceil(this.dataLenLeft / this.limitLeft)
    },
  },
  components: {
    footView,
  },
  methods: {
    search(flag = 0){
      // if (flag) {
      //   this.currentPageLeft = 1
      //   this.$refs.paginationLeft.internalCurrentPage = 1
      // }
      factoryBill({
        manufacturerNo: this.vendor,
        startDate: this.dateList ? this.dateList[0] + ' 00:00:00' : '',
        endDate: this.dateList ? this.dateList[1] + ' 23:59:59' : '',
        // 'pageData.limit': this.limitLeft,
        // 'pageData.page': this.currentPageLeft,
      }).then(res => {
        this.tableData1 = res.data.data.totalList
        this.infoList = res.data.data.infoList
        // this.tableData2 = res.data.data.infoList

        this.tableData1.forEach(e => {
          e.time = e.enteringTime.slice(0,10)
        });
        this.infoList.forEach(e => {
          e.time = e.enteringTime.slice(0,10)
        });

        this.dataLenLeft = res.data.total
      })
    },
    outPutLeft(){
      this.tableData1.forEach((e,i) => {
        e.index = (i+1)
      });
      const column = [
        { key: 'index', title: '序号', type: 'text' },
        { key: 'sequence', title: '单据序号', type: 'text' },
        { key: 'manufacturerNo', title: '厂商', type: 'text' },
        { key: 'number', title: '数量', type: 'text' },
        { key: 'manufacturerPriceMoney', title: '成本金额', type: 'text' },
        { key: 'money', title: '售价金额', type: 'text' },
        { key: 'time', title: '日期', type: 'text' },
      ]
      table2excel(column, this.tableData1, "厂商对账左表.xls")
    },
    outPutRight(){
      this.tableData2.forEach(e => {
        e.colorNo += '&nbsp;'
      })
      const column = [
        { key: 'sequence', title: '单据序号', type: 'text' },
        { key: 'manufacturerNo', title: '厂商', type: 'text' },
        { key: 'kindsNumber', title: '货号', type: 'text' },
        { key: 'colorNo', title: '颜色编号', type: 'text' },
        { key: 'colorName', title: '颜色名称', type: 'text' },
        { key: 'size', title: '尺码', type: 'text' },
        { key: 'number', title: '数量', type: 'text' },
        { key: 'manufacturerPrice', title: '成本', type: 'text' },
        { key: 'manufacturerPriceMoney', title: '成本金额', type: 'text' },
        { key: 'sellingPrice', title: '售价金额', type: 'text' },
        { key: 'time', title: '日期', type: 'text' },
      ]
      table2excel(column, this.tableData2, "厂商对账右表.xls")
    },

    handleCurrentChangeLeft(val){
      this.currentPageLeft = val
      this.search()
    },
    handleSizeChangeLeft(val){
      this.limitLeft = val
      this.search(1)
    },

    rowClick(row) {
      let tmp = []
      const s = row.sequence
      this.infoList.forEach(e => {
        if (e.sequence == s) {
          tmp.push(e)
        }
      });
      this.tableData2 = tmp
    }
  }
}
</script>